<template>
  <div class="categories">
    <h1>精选商品分类</h1>
    <div class="category-search">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索分类或子分类..."
        @input="debounceSearch"
      >
      <button @click="clearSearch" v-if="searchQuery" class="clear-search">×</button>
    </div>
    <p v-if="searchQuery && filteredCategories.length === 0" class="no-results">
      没有找到匹配的分类，请尝试其他关键词。
    </p>
    <div class="category-grid">
      <div 
        v-for="category in filteredCategories" 
        :key="category.id" 
        class="category-card"
        @click="selectCategory(category)"
      >
        <div class="category-icon">{{ category.icon }}</div>
        <h2>{{ category.name }}</h2>
        <p class="category-description">{{ category.description }}</p>
        <p v-if="highlightedSubCategories(category).length > 0" class="matching-subcategories">
          匹配的子分类: {{ highlightedSubCategories(category).join(', ') }}
        </p>
      </div>
    </div>
    <div v-if="selectedCategory" class="subcategory-modal">
      <div class="modal-content">
        <h2>{{ selectedCategory.name }}</h2>
        <ul class="subcategory-list">
          <li v-for="subCategory in selectedCategory.subCategories" :key="subCategory.id">
            <router-link :to="{ name: 'CategoryProducts', params: { id: subCategory.id }}">
              {{ subCategory.name }}
            </router-link>
          </li>
        </ul>
        <button @click="closeModal" class="close-button">关闭</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
const categories = ref([
  { id: 1, name: '饼干', icon: '🍪', description: '酥脆可口，多种口味', subCategories: [
    { id: 101, name: '夹心饼干' }, { id: 102, name: '曲奇饼干' },
    { id: 103, name: '威化饼干' }, { id: 104, name: '苏打饼干' },
    { id: 105, name: '巧克力饼干' }, { id: 106, name: '燕麦饼干' },
  ]},
  { id: 2, name: '糖果', icon: '🍬', description: '甜蜜美味，缤纷色彩', subCategories: [
    { id: 201, name: '硬糖' }, { id: 202, name: '软糖' },
    { id: 203, name: '棒棒糖' }, { id: 204, name: '果冻糖' },
    { id: 205, name: '奶糖' }, { id: 206, name: '巧克力糖' },
  ]},
  { id: 3, name: '薯片', icon: '🥔', subCategories: [
    { id: 301, name: '原味薯片' }, { id: 302, name: '烧烤味薯片' },
    { id: 303, name: '番茄味薯片' }, { id: 304, name: '芥末味薯片' },
    { id: 305, name: '海苔味薯片' }, { id: 306, name: '酸奶味薯片' },
  ]},
  { id: 4, name: '坚果', icon: '🥜', subCategories: [
    { id: 401, name: '杏仁' }, { id: 402, name: '腰果' },
    { id: 403, name: '花生' }, { id: 404, name: '开心果' },
    { id: 405, name: '核桃' }, { id: 406, name: '松子' },
  ]},
  { id: 5, name: '巧克力', icon: '🍫', subCategories: [
    { id: 501, name: '牛奶巧克力' }, { id: 502, name: '黑巧克力' },
    { id: 503, name: '白巧克力' }, { id: 504, name: '夹心巧克力' },
    { id: 505, name: '榛子巧克力' }, { id: 506, name: '薄荷巧克力' },
  ]},
  { id: 6, name: '果干', icon: '🍇', subCategories: [
    { id: 601, name: '葡萄干' }, { id: 602, name: '蔓越莓干' },
    { id: 603, name: '芒果干' }, { id: 604, name: '香蕉片' },
    { id: 605, name: '苹果干' }, { id: 606, name: '子干' },
  ]},
  { id: 7, name: '软糖', icon: '🍬', subCategories: [
    { id: 701, name: '水果软糖' }, { id: 702, name: '棉花糖' },
    { id: 703, name: '果冻软糖' }, { id: 704, name: '夹心软糖' },
    { id: 705, name: '酸味软' }, { id: 706, name: '巧克力软糖' },
  ]},
  { id: 8, name: '膨化食品', icon: '🍿', subCategories: [
    { id: 801, name: '爆米' }, { id: 802, name: '玉米片' },
    { id: 803, name: '虾条' }, { id: 804, name: '锅巴' },
    { id: 805, name: '麻花' }, { id: 806, name: '米果' },
  ]},
  { id: 9, name: '饮料', icon: '🥤', subCategories: [
    { id: 901, name: '碳酸饮料' }, { id: 902, name: '果汁' },
    { id: 903, name: '茶饮料' }, { id: 904, name: '咖啡' },
    { id: 905, name: '能量饮料' }, { id: 906, name: '矿泉水' },
  ]},
  { id: 10, name: '零食礼盒', icon: '🎁', subCategories: [
    { id: 1001, name: '综合零食礼盒' }, { id: 1002, name: '坚果礼盒' },
    { id: 1003, name: '巧克力礼盒' }, { id: 1004, name: '糖果礼盒' },
    { id: 1005, name: '饼干礼盒' }, { id: 1006, name: '节日特别礼盒' },
  ]},
]);
const selectedCategory = ref(null);
const searchQuery = ref('');
const filteredCategories = computed(() => {
  if (!searchQuery.value) return categories.value;
  const query = searchQuery.value.toLowerCase();
  return categories.value.filter(category => 
    category.name.toLowerCase().includes(query) ||
    category.description.toLowerCase().includes(query) ||
    category.subCategories.some(sub => sub.name.toLowerCase().includes(query))
  );
});
const highlightedSubCategories = (category) => {
  if (!searchQuery.value) return [];
  const query = searchQuery.value.toLowerCase();
  return category.subCategories
    .filter(sub => sub.name.toLowerCase().includes(query))
    .map(sub => sub.name);
};
const selectCategory = (category) => {
  selectedCategory.value = category;
};
const closeModal = () => {
  selectedCategory.value = null;
};
const clearSearch = () => {
  searchQuery.value = '';
};
let debounceTimeout;
const debounceSearch = (event) => {
  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(() => {
    searchQuery.value = event.target.value;
  }, 300);
};
</script>
<style scoped>
.categories {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.categories::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

h1 {
  font-size: 32px;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}
.category-search {
  position: relative;
  margin-bottom: 20px;
  text-align: center;
}
.category-search input {
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  padding-right: 40px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 25px;
}
.clear-search {
  position: absolute;
  right: calc(50% - 190px);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
}
.no-results {
  text-align: center;
  color: #666;
  margin-top: 20px;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
}
.category-card {
  background-color: #fff;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.category-icon {
  font-size: 64px;
  margin-bottom: 15px;
}
.category-card h2 {
  font-size: 20px;
  color: #333;
  margin: 0 0 10px;
}
.category-description {
  font-size: 14px;
  color: #666;
  margin: 0;
}
.subcategory-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.modal-content::-webkit-scrollbar {
  display: none;
}

.modal-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
.subcategory-list {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.subcategory-list li {
  margin-bottom: 10px;
}
.subcategory-list a {
  text-decoration: none;
  color: #555;
  font-size: 16px;
  transition: color 0.3s ease;
}
.subcategory-list a:hover {
  color: #007bff;
}
.close-button {
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.close-button:hover {
  background-color: #0056b3;
}
.matching-subcategories {
  font-size: 12px;
  color: #007bff;
  margin-top: 10px;
}
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .clear-search {
    right: 10px;
  }
}
@media (min-width: 769px) {
  .categories {
    padding-left: 40px;
    padding-right: 40px;
    transition: all 0.3s ease;
  }
}
</style>
